<template>
  <div class="split-pane-wrapper" ref="myDiv" @mousemove="mouseMoveTrigger">
    <div class="pane-left" ref="myDiv1" :style="{ width: leftOffset_left + 'px' }">
      Java
    </div>
    <div class="pane-trigger-con" @mousedown="mouseDownTrigger1"></div>
    <div class="pane-center" ref="myDiv2" :style="{ width: leftOffset_center + 'px' }">
      JavaScript
    </div>
    <div class="pane-trigger-con" @mousedown="mouseDownTrigger2"></div>
    <div class="pane-right" ref="myDiv3" :style="{ width: leftOffset_right + 'px' }">
      Rust
    </div>
  </div>
</template>
<script setup lang="ts">
import { Ref } from 'vue';
import { onMounted, toRefs } from 'vue';
import { computed, inject, ref, unref, watchEffect, reactive } from 'vue'
const xian = ref(0);
const leftOffset_left = ref(300);
const leftOffset_center = ref(300);
const leftOffset_right = ref(300);
const triggerDragging = ref(false);
const myDiv = ref<HTMLElement | null>(null);
const myDiv1 = ref<HTMLElement | null>(null);
const myDiv2 = ref<HTMLElement | null>(null);
const myDiv3 = ref<HTMLElement | null>(null);
const leftMargin: Ref<number> = ref(0);

if (myDiv.value) {
  leftMargin.value = Number(myDiv.value.style.marginLeft);
}

//当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件移动一个像素，就会发生一次 mousemove
function mouseMoveTrigger(event: MouseEvent) {
  if (myDiv1.value && myDiv2.value && myDiv.value && myDiv3.value) {
    const width = myDiv.value.offsetWidth;
    const width1 = myDiv1.value.offsetWidth;
    const width2 = myDiv2.value.offsetWidth;
    const width3 = myDiv3.value.offsetWidth;
    console.log('event.clientX: ' + event.clientX + ' Div宽度： ' + width + ' myDiv1宽度： ' + width1 + ' myDiv2宽度： ' + width2 + ' myDiv3宽度： ' + width3 + " xian.value: " + xian.value);
    if (xian.value == 1 && triggerDragging.value) {
      if (myDiv.value && myDiv1.value && myDiv2.value && myDiv3.value) {
        leftOffset_left.value = event.clientX - leftMargin.value;
        leftOffset_center.value = width - (event.clientX - leftMargin.value) - width3;
      }

    }

    if (xian.value == 2 && triggerDragging.value) {
     
      if (myDiv.value && myDiv1.value && myDiv2.value && myDiv3.value) {
        console.log((event.clientX - leftMargin.value - width1))
        console.log((width - (event.clientX - leftMargin.value)))
        console.log((leftOffset_left.value))
        leftOffset_center.value = width - (event.clientX - leftMargin.value - width1);
        leftOffset_right.value = width - (event.clientX - leftMargin.value);
      }
    }
    if (!event.which) {
      triggerDragging.value = false;
    }
  }

  // if (triggerDragging.value) {
  //   leftOffset_left.value = event.clientX;
  // }
};
//用户按下鼠标按钮
function mouseDownTrigger1(event: MouseEvent) {
  xian.value = 1;
  triggerDragging.value = true;
};
//用户按下鼠标按钮
function mouseDownTrigger2(event: MouseEvent) {
  xian.value = 2;
  triggerDragging.value = true;
};
onMounted(() => {
  // 确保DOM已经渲染完成
  if (myDiv.value) {
    const width = myDiv.value.offsetWidth;
    console.log('Div宽度：', width);
  }
});

</script>
<style scoped>
.split-pane-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.pane-left {
  background: rgb(240, 143, 143);
}

.pane-center {
  flex: 1;
  background: rgb(74, 75, 74);
}

.pane-right {
  flex: 1;
  background: rgb(200, 206, 194);
}

.pane-trigger-con {
  width: 2px;
  background: red;
  cursor: ew-resize;
}
</style>
